import React from 'react'
import ReactDOM from 'react-dom'

// 自定义组件
class MyHeader extends React.Component {
  state = {
    msg: 'MyHeader Msg',
  }
  render() {
    return <header>头部组件</header>
  }
}

class App extends React.Component {
  state = {}

  // 创建一个 ref 对象，用于关联模板中的某个元素
  DOMRef = React.createRef()

  // React.createRef() 的价值在于获取组件
  ComRef = React.createRef()

  handelClick = () => {
    // 场景1：获取DOM元素其实和 document.querySelector() 获取无差别
    console.log('1.获取DOM元素', this.DOMRef.current)
    // console.log(document.querySelector('#aa'))
    // 场景2：获取组件，ref 价值所在
    console.log('2.获取自定义组件', this.ComRef.current)
  }

  render() {
    return (
      <>
        <h1>非受控组件-ref</h1>
        <h2 ref={this.DOMRef}>副标题</h2>
        <MyHeader ref={this.ComRef} />
        <button onClick={this.handelClick}>获取Ref关联的对象</button>
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
